나만의 블로그 만들기(with. Gatsby)

개발 공부를 시작했을 때는 Velog에서 학습한 내용을 포스팅했었다. 짧고 간결하게 배운 것들을 작성하다 보니, 자유롭고 가볍게 글을 작성하고 싶다는 생각이 들어 Notion으로 이전했다. 올해에 들어서면서 문서화를 더 열심히 하는 습관을 들이기로 다짐했는데, 그러다 보니 보다 많은 사람들이 볼 수 있는 곳에서 글을 작성하고 싶다는 생각이 들었어요. 이에 정기적으로 포스팅하기가 어려울 것 같아 나만의 블로그를 만들게 되었습니다.

내가 블로그를 만들면서 사용한 도구는 하위와 같다.

• SSG 빌드: Gatsby
• 스타일링: Tailwind
• 콘텐츠 관리: Contentful
• 배포: Netlify

Gatsby

Gatsby는 React 기반의 정적 페이지 생성(SSG) 라이브러리이기 때문에 빌드 도구로 선택했다. React로 개발 경험이 대부분이 나에게 낮은 러닝 커브가 이점으로 다가왔다. 정적 사이트 생성기이기 때문에 웹 사이트를 미리 빌드 하여, 빠른 페이지 로딩 속도를 제공한다는 점 또한 정적인 기능이 블로그에게 잘 맞을 것이라고 생각했다.

Gatsby에 알아보면서 장점이라고 느꼈던 점은 잘 정리된 공식 문서를 제공한다는 점이다. 간혹 라이브러리의 공식 문서를 확인할 때, 잘 정리되어 있다고 느끼고 도입했다가 부족한 정보들이 있다고 느끼는경우도 있었다. 그러나 Gatsby는 직접 개발해 보면서 공식 문서에 필요한 정보들이 모두 담겨 있다고 느꼈다. Gatsby에 필요한 설정이나 이슈 디버깅까지, 정보를 방대하게 제공하고 있어 기술에 대한 적용이 쉬웠다.

Gatsby는 다양하고 확장성 있는 플러그인을 제공한다. 이미지 최적화, SEO 관리 등 블로그에 필요한 기능의 플러그인을 쉽게 추가할 수 있어, 개발자 입장에선 코드를 작성하는 부분에 더 집중할 수 있다. 나는 직접 사용했을 때 React나 Next에 비해 플러그인 사용 시 복잡한 설정이 적어 굉장히 만족스러웠다.

마지막으로 이미 Gatsby로 블로그를 개설한 사람들의 글이 많았다. 그에 따라 라이브러리의 이슈 디버깅이나, 실전 정보들을 많이 얻을 수 있다는 점도 좋게 작용했다.

Tailwind

이전에 회사에서 잠시 사용해 본 경험이 있는데, 성능 면에서는 좋은 점이 있지만, 개발 경험이 좋다고 느끼지는 못했다. 아마도 문법에 익숙하지 않거니와 emotion만 사용해오던 나로서는 코드 안에 스타일링이 들어간다는 것이 가독성 면에서 매우 아쉬웠다.

이번 블로그에서 채택한 이유는 가벼운 스타일링 툴을 사용하고 싶었다. Tailwind는 색상이나 사이즈에 대한 시스템이 이미 갖춰져 있어서, theme를 커스텀 해서 사용하지 않아도 됐다. 오랜만에 다시 만난 Tailwind는 생각보다 좋은 경험이라고 느껴졌다. 막상 편견을 거두니 문법이 익숙해질수록 스타일링 간단했고, 스타일링이 지정된 위치를 추적해서 수정해야 하는 emotion보다 간편하게 느껴지기도 했다.

마크다운 스타일링

Tailwind를 사용하다 보면 마크다운 태그에 일일이 style을 주입하기 쉽지 않다. 나는 단순하게 className과 css를 사용해서 스타일링 했다. 코드 하이라이트 기능에는 prsimjs를 사용했다.

작은 이슈 상황이 발생했다. prismjs와 관련 패키지를 설치하고 필요한 설정을 완료했음에도 스타일이 지정되지 않았다. 렌더링 된 codeblock을 확인한 결과 토큰 화가 잘 이뤄지지 않고 있었다.

이 문제는 Prism.highlightAll() 매소드를 사용해 .language-xxxx 클래스명을 가진 요소들에 하이라이트를 추가하도록 하여 해결했다.(공식 문서)

import Prism from 'prismjs'

const post = () => {
	useEffect(() => {
		Prism.highlightAll()
	}, [])

	...
}

임시적인 해결책이기 때문에 시간이 되면 왜 제대로 동작되지 않는지를 확인해 볼 필요가 있을 것 같다.

Contentful

글을 작성하는 방식에 대해서 찾아보면서 Headless CMS에 대해 알게 됐다. 개인 블로그를 꾸리면 스스로 데이터베이스를 구축하지 않는 이상 mdx 파일을 업로드해서 글을 작성해야 한다고 생각하던 나에게 너무 반가운 기술이었다.

👉🏻 Headless CMS란?

기존 CMS는 콘텐츠 생성과 콘텐츠를 보여주는 부분이 통합된 형태로 존재했다. Headless CMS는 이러한 부분이 분리되어 독립적으로 동작한다. 이에 따라 콘텐츠를 유연하고 확장성 있게 커스텀 할 수 있다는 것이 큰 장점이다. 이렇게 생성된 콘텐츠를 가져오는 API 또한 제공하고 있어 효율적으로 개발이 가능하다.

Contentful은 Gatsby 공식 문서에서 추천해 준 CMS 중 인기가 많은 라이브러리 중 하나였다. 인기가 많은 CMS인 만큼 설정하는 것도 어렵지 않았고, 자료가 많이 나와있는 편이었다. 개인 블로그를 운영하는 정도는 충분히 무료로 이용이 가능할 것 같다는 점도 좋게 다가왔다. 테스트해 보니 폼을 만드는 방식이나, 글을 작성하는 방식 등이 편리하다고 느꼈다.

(간단히 테스트해 볼 땐 몰랐는데, 포스팅하려니 richtext 사용 시 이전에 복사해 놓은 문구가 계속해서 붙여넣기 되는 이슈가 있다.. Contetnful 사용하시려는 분들이 참고하시면 좋을 것 같다😥)

Netlify

Gatsby에서 라이브러리를 제공하는 배포 툴 중 가장 익숙하여 선택했다. 이전부터 프로젝트를 배포할 때 사용해왔는데 사용 경험이 좋아 계속 찾게 되는 것 같다. Netlify에서 webhook을 생성하여 Contentful에 등록해 주면 포스트에 변경사항 시마다 자동으로 배포하는 것도 가능하다.

마치며

새로운 기술인 Gatsby, Tailwind, Contentful을 사용해 본 것은 유익한 경험이었다. 기술이란 것이 처음에는 낯선 게 느껴지지만, 익숙해지면서 기술 사이의 공통 점들 또한 발견하는 것 같다! 작년에 이어오던 프로젝트의 작업이 길어지면서 조금은 개발이 루스하게 느껴졌는데, 새로운 것들을 배운다는 것에서 개발에 대한 즐거움을 다시 찾은 것 같다.

아쉬운 점이 있다면 완성 후에 발견한 Contentful 텍스트 작성 이슈이다. 당장은 다른 곳에서 작성 후 붙여 넣는 방식으로 사용하면 되지만 글이 늘어나면 이사도 어려울 것 같아 시간이 날 때 다른 CMS로의 이동도 고민하고 있다.

추후에는 정적 페이지의 이점을 극대화할 수 있도록 SEO 점수를 높여 블로그의 검색 노출을 향상시킬 계획이다. 다크 모드, 페이지 네이션, 반응형 등의 작업을 통해 지속적으로 사용성을 개선할 예정이다.